<template>
  <!-- 参数配置密码校验 -->
  <hcDialog
    dialogWidth="400px"
    dialogTitle="密码校验"
    customClass="hymson-dialog dict-dialog"
    :isVisable="modelValue"
    :isFooter="true"
    :isCancel="false"
    @save="saveDialog(formRef)"
    @closeDialog="closeFun"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="60px"
      class="add-role-ruleForm"
      status-icon
    >
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
    </el-form>
  </hcDialog>
</template>

<script setup name="CheckPwd">
import { reactive, ref, toRefs } from "vue";
import { verifyParamsPwd } from "@/api/config";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

const emit = defineEmits(["update:modelValue", "onCancel", "getPwd"]);

defineProps({
  modelValue: { type: Boolean, default: false },
});

const { t: $t } = useI18n();

const rules = {
  password: [
    {
      required: true,
      message: $t("common.inputText"),
      trigger: "blur",
    },
  ],
};

const formRef = ref();

const form = reactive({
  password: "",
});

// 校验密码
const saveDialog = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      verifyParamsPwd(form.password).then((res) => {
        ElMessage.success("验证通过");
        emit("update:modelValue", false);
        emit("getPwd", form.password);
      });
    }
  });
};

const closeFun = () => {
  emit("update:modelValue", false);
};
</script>

<style lang="scss" scoped>
.param-type {
  width: 300px;
  height: 28px;
  line-height: 28px;
  background: #000000;
  padding: 0 8px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
